<!doctype html>
<html lang="zh-CN">
<head>
    <title>calculator</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="./js/jquery-2.0.3.js" type="text/javascript"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div style="height: 550px;width: 420px;margin: auto;color: #9b00ef;background: gray" >
    <div>
        <p style="text-align: center; font-size: 64px;color: #37ff00;">calculator</p>
    </div>
    <div style="width: 415px ;height:40px; margin-top: 10px;">
        <input id="input1" type="text"
               style="width: 100%; height: 100%; text-align: right; font-size: 28px; color: #0060ef;" readonly>
    </div>
    <div style="width: 440px;  margin-top: 5px;">
        <button id="button1" style="width: 137px ;height:40px; margin-top: 10px" onclick="b1()">1</button>
        <button id="button2" style="width: 137px ;height:40px; margin-top: 10px" onclick="b2()">2</button>
        <button id="button3" style="width: 138px ;height:40px; margin-top: 10px" onclick="b3()">3</button>
    </div>
    <div style="width: 440px;  margin-top: 5px;">
        <button id="button4" style="width: 137px ;height:40px; margin-top: 10px" onclick="b4()">4</button>
        <button id="button5" style="width: 137px ;height:40px; margin-top: 10px" onclick="b5()">5</button>
        <button id="button6" style="width: 138px ;height:40px; margin-top: 10px" onclick="b6()">6</button>
    </div>
    <div style="width: 440px;  margin-top: 5px;">
        <button id="button7" style="width: 137px ;height:40px; margin-top: 10px" onclick="b7()">7</button>
        <button id="button8" style="width: 137px ;height:40px; margin-top: 10px" onclick="b8()">8</button>
        <button id="button9" style="width: 138px ;height:40px; margin-top: 10px" onclick="b9()">9</button>
    </div>
    <div style="width: 440px;  margin-top: 5px;">
        <button id="button0" style="width: 137px ;height:40px; margin-top: 10px" onclick="b0()">0</button>
        <button id="buttonAdd" style="width: 137px ;height:40px; margin-top: 10px" onclick="addOrSub(1)">+</button>
        <button id="buttonSub" style="width: 138px ;height:40px; margin-top: 10px" onclick="addOrSub(2)">-</button>
    </div>
    <div style="width: 440px;  margin-top: 5px;">

        <button id="buttonMulti" style="width: 136px ;height:40px; margin-top: 10px" onclick="addOrSub(3)">*</button>
        <button id="buttonDivi" style="width: 136px ;height:40px; margin-top: 10px" onclick="addOrSub(4)">/</button>
        <button id="test2" style="width: 138px ;height:40px; margin-top: 10px" onclick="test2()">=</button>
    </div>
    <div style="width: 440px;  margin-top: 5px;">

        <button id="reset" style="width: 420px ;height:40px; margin-top: 10px" onclick="reset()">C</button>
    </div>
</div>
<script>
    var pri = 0;
    var dis = 0;
    var v1 =0;
    var v2 =0;
    var state = 0;
    function b0() {
        if ($("#input1").val() == 0){
            v1 = $("#button0").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "0");
        }

    }
    function b1() {
        if ($("#input1").val() == 0){
            v1 = $("#button1").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "1");
        }
    }
    function b2() {
        if ($("#input1").val() == 0){
            v1 = $("#button2").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "2");
        }

    }
    function b3() {
        if ($("#input1").val() == 0){
            v1 = $("#button3").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "3");
        }

    }
    function b4() {
        if ($("#input1").val() == 0){
            v1 = $("#button4").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "4");
        }

    }
    function b5() {
        if ($("#input1").val() == 0){
            v1 = $("#button5").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "5");
        }

    }
    function b6() {
        if ($("#input1").val() == 0){
            v1 = $("#button6").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "6");
        }

    }
    function b7() {
        if ($("#input1").val() == 0){
            v1 = $("#button7").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "7");
        }

    }
    function b8() {
        if ($("#input1").val() == 0){
            v1 = $("#button8").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "8");
        }

    }
    function b9() {
        if ($("#input1").val() == 0){
            v1 = $("#button9").text();
            $("#input1").val(v1);
        }else {
            $("#input1").val($("#input1").val() + "9");
        }
    }

    function addOrSub(state) {
        this.state = state;
        this.v1 = $("#input1").val();
        console.log("v1:"+v1);
        console.log("stat:"+state);

        if (state == 1){
            let youxiu;
            let val = $("#input1").val().split(' ');
            for (let aKey in val) {
                youxiu = val[aKey]
            }
            if (youxiu != '' &&  youxiu != '+'){
                $("#input1").val( $("#input1").val() + " + " );
            }

        }
        if (state == 2){
            let youxiu;
            let val = $("#input1").val().split(' ');
            for (let aKey in val) {
                youxiu = val[aKey]
            }
            if (youxiu != '' &&  youxiu != '-'){
                $("#input1").val( $("#input1").val() + " - " );
            }

        }
        if (state == 3){
            let youxiu;
            let val = $("#input1").val().split(' ');
            for (let aKey in val) {
                youxiu = val[aKey]
            }
            if (youxiu != '' &&  youxiu != '*'){
                $("#input1").val( $("#input1").val() + " * " );
            }

        }
        if (state == 4){
            let youxiu;
            let val = $("#input1").val().split(' ');
            for (let aKey in val) {
                youxiu = val[aKey]
            }
            if (youxiu != '' &&  youxiu != '/'){
                $("#input1").val( $("#input1").val() + " / " );
            }

        }
    }
    function reset() {
        $("#input1").val(0);
        state = 0;
        v1 = 0;
        v2 = 0;
        dis = 0;
        pri = 0;
    }

    function test2() {

        var b = $("#input1").val();
        if (b != 0){
            var strings = b.split(' ');

            for(let im in strings){

                if(strings[im] == '*'){
                    strings[parseInt(im)-1] = parseInt(strings[parseInt(im)-1])*parseInt(strings[parseInt(im)+1]);
                    strings.splice(parseInt(im),2);
                }
                if(strings[im] == '/'){
                    strings[parseInt(im)-1] = parseInt(strings[parseInt(im)-1])/parseInt(strings[parseInt(im)+1]);
                    strings.splice(parseInt(im),2);
                }
            }
            pri += parseInt(strings[0]);
            for(let im in strings){
                if(strings[im] == '+'){
                    pri += parseInt(strings[parseInt(im)+1]);
                }
                if(strings[im] == '-'){
                    pri -= parseInt(strings[parseInt(im)+1]);
                }

            }
            $("#input1").val(pri);
        }
    }

    function dd() {
        $("#input1").val(0);
    }
    window.onload=dd;
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
